<template>
  <el-tabs v-model="mode" class="tab-box">
    <el-tab-pane name="edit" label="编辑模式" lazy>
      <el-container class="box-container">
        <el-container>
          <el-aside width="300px" class="aside">
            <draggable
              :list="components"
              :group="{ name: 'components', pull: 'clone', put: false }"
              :clone="cloneDog"
              @end="end"
            >
              <template #item="{ element }">
                <div class="origin-box">
                  <LowCode :schema="element.preview" />
                </div>
              </template>
            </draggable>
          </el-aside>
          <el-container>
            <el-main>
              <draggable
                class="drag-area"
                :list="targets"
                :group="{ name: 'components' }"
                item-key="vid"
              >
                <template #item="item">
                  <div
                    class="target"
                    :class="{
                      choose: currentChooseIndex === item.index,
                      inline: !isBlock(item.element.render.type)
                    }"
                    @click="choose(item)"
                  >
                    <LowCode :schema="item.element.render" />
                  </div>
                </template>
              </draggable>
            </el-main>
          </el-container>
        </el-container>
      </el-container>
    </el-tab-pane>
    <el-tab-pane name="code" label="源码模式" lazy>
      <Code :code="codeStr" />
    </el-tab-pane>
    <el-tab-pane name="preview" label="预览" lazy>
      <LowCode :schema="code" />
    </el-tab-pane>
  </el-tabs>
</template>

<script setup>
import draggable from 'vuedraggable'
import { ref, reactive } from 'vue'
import schemas from './coms/data/schemas'
import LowCode from '@/components/LowCode.vue'
import { v4 as uuid } from 'uuid'
import { deepCopy, isDef } from '@/utils/index'
import Code from './coms/code.vue'
import { VisualEditorPropsType } from '@/visitual-editor/props.util.lowcode'
import { DrawerService } from '@/core/hook/drawer-service'

const components = deepCopy(schemas)

const targets = reactive([])
const mode = ref('edit')
const currentChooseIndex = ref()
const code = reactive({
  type: 'div',
  body: []
})
const codeStr = ref(JSON.stringify(code))

const blocks = ['crud', 'form']

function isBlock(type) {
  return blocks.includes(type)
}

function updateCode() {
  const body = targets.map((item) => item.render)
  const page = {
    type: 'page',
    body
  }
  code.body = body
  codeStr.value = JSON.stringify(page)
}

function cloneDog(comp) {
  comp.vid = uuid()
  return comp
}

function end() {
  updateCode()
}

function chooseElementCb(itemElement) {
  const body = []
  const element = itemElement.element
  let item = element.render

  if (item.body && Array.isArray(item.body)) {
    body.push({
      type: 'list',
      body: item.body,
      labelWidth: '0px'
    })
  } else if (item.type === 'crud') {
    body.push({
      type: 'columns',
      body: item.columns,
      labelWidth: '0px'
    })
  }
  for (const [key, value] of Object.entries(element.props)) {
    const prop = { prop: key }
    if (value.type === VisualEditorPropsType.input) {
      prop.type = 'input-text'
    } else if (value.type === VisualEditorPropsType.inputNumber) {
      prop.type = 'input-number'
    } else if (value.type === VisualEditorPropsType.select) {
      prop.type = 'select'
      prop.options = value.options
    } else if (value.type === VisualEditorPropsType.switch) {
      prop.type = 'switch'
    }
    prop.defaultValue = isDef(item[key]) ? item[key] : value.defaultValue
    prop.label = value.label
    body.push(prop)
  }
  DrawerService({
    type: 'drawer',
    title: '修改属性',
    body: {
      type: 'form',
      rules: {
        type: [
          {
            required: true,
            message: '请选择元素类型'
          }
        ]
      },
      body
    },
    confirmButton: {
      type: 'button',
      actionType: 'validate',
      level: 'primary',
      body: '修改',
      validateResolve: (values) => {
        item = Object.assign(item, values)
        console.log('item', item)
        updateCode()
      }
    }
  })
  currentChooseIndex.value = itemElement.index
}

function choose(item) {
  chooseElementCb(item)
}
</script>
<style lang="scss" scoped>
.tab-box {
  height: 100%;
  display: flex;
  flex-direction: column;
  ::v-deep(.el-tabs__content) {
    flex: 1;
    .el-tab-pane {
      height: 100%;
    }
  }
}
.drag-area {
  width: 100%;
  height: 100%;
  .target {
    cursor: move;
    &.choose {
      border: 1px dotted var(--el-color-primary);
    }
    &.inline {
      display: inline-block;
    }
  }
}
.box-container {
  height: 100%;
  .aside {
    height: 100%;
    border-right: 1px solid rgb(221, 221, 221);
    padding-right: 10px;
  }
  .origin-box {
    padding: 10px;
    border-radius: 5px;
    border: 1px solid rgba(221, 221, 221, 1);
    margin-bottom: 10px;
  }
}
</style>
